<template>
    <el-main>
        <el-form :model="sysParamForm" ref="sysParamForm" size="small" label-position="top">
            <el-form-item label="Blog Name">
                <el-input v-model="sysParamForm.blogname"></el-input>
            </el-form-item>
 
            <el-form-item label="Blog Description">
                <el-input v-model="sysParamForm.blogdesc"></el-input>
            </el-form-item>

            <el-form-item label="Blog Keywords">
                <el-input v-model="sysParamForm.blogkeywords"></el-input>
            </el-form-item>

            <el-form-item label="Blog Icon">
                <el-upload
                    class="avatar-uploader"
                    action="/api/admin/sysparam/admin/uploadIcon"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="sysParamForm.icon" :src="sysParamForm.icon" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item label="Blog Rights">
                <el-input v-model="sysParamForm.rights"></el-input>
            </el-form-item>

            <el-form-item label="Blog Register">
                <el-input v-model="sysParamForm.register"></el-input>
            </el-form-item>

            <el-form-item label="Blog Contact">
                <el-input v-model="sysParamForm.contact"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm();">{{$t('button.save')}}</el-button>
            </el-form-item> 
        </el-form>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `information`,
    data: function() {
        return {
            sysParamForm: {
                blogname: ``,
                blogdesc: ``,
                blogkeywords: ``,
                icon: null,
                rights: ``,
                register: ``,
                contact: ``
            }
        };
    },
    mounted: function() {
        Vue.axios
            .post(`/api/admin/sysparam/query/listsysparams`)
            .then(response => {
                //console.log(JSON.stringify(response));
                this.sysParamForm = response.data;
            })
            .catch(() => {
                this.$router.push("/ui/login");
            });
    },
    methods: {
        // 保存表单方法
        submitForm() {
            Vue.axios({
                method: `POST`,
                url: `/api/admin/sysparam/admin/saveSystemParameter`,
                data: this.sysParamForm
            })
                .then(response => {
                    // console.log(JSON.stringify(response));
                    if (response.status === 200) {
                        this.$message({
                            message: this.$t(`message.save.success`),
                            type: `success`
                        });
                        return;
                    }
                    throw error;
                })
                .catch(error => {
                    this.$router.push("/ui/login");
                });
        },
        handleAvatarSuccess(res, file) {
            this.sysParamForm.icon = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            //console.log(file);
            const isIcon = file.type === "image/x-icon";

            if (!isIcon) {
                this.$message.error("上传头像图片只能是 icon 格式!");
            }
            return isIcon;
        }
    }
};
</script>

<style scoped lang="stylus">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 40px;
    height: 40x;
    line-height: 40px;
    text-align: center;
}

.avatar {
    width: 40px;
    height: 40px;
    display: block;
}
</style>
